<template>
<div class="backImg">               
 <img src="../assets/a1.png" class="Img1">
    <img src="../assets/a2.png" class="Img2">
    <div  class="content1"> 
        <div class="whiteText" style="margin-left: 26px;">双线质量管控体</div>
        <div class="whiteText" style="margin-top: 45px;">力求每件产品、每个细节都尽善尽美</div>
        <div class="blueText" style="margin-left: 92px;">够专业&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;才放心</div>
    </div>
    <div class="downText">All&nbsp;Rights&nbsp;Reserved&nbsp;©2021&nbsp;版权所有&nbsp;&nbsp;&nbsp;｜ &nbsp;粤ICP备18069755号</div>
    <div class="denglu">
        <div class="welcome">欢迎使用</div>
        <div class="xitong">系统登陆</div>
        <div class="content2" style="margin-top: 46px;">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="userName" class="smallText">         
               
    <el-input v-model="ruleForm.userName" class="namecontent"><img slot="prefix" class="user_icon" src="../assets/user.png"/></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="passWord" class="smallText">         
               
    <el-input v-model="ruleForm.passWord" class="namecontent" type="password"><img slot="prefix" class="pass_icon" src="../assets/pass.png"/></el-input>
  </el-form-item>
          </el-form>
            <!-- <div class="smallText">用户名</div>
            
            <input class="namecontent" /> -->
        </div>
        <!-- <div class="content2" style="margin-top: 28px;">
            <div class="smallText" style="margin-left:10px">密&nbsp;&nbsp;码</div>
            <i class="pass_icon"></i>
            <input class="namecontent" />
        </div>     -->
        <div class="submit" @click="submitForm"><div class="sing">登陆</div></div>
    </div>
  </div>


</template>

<script>

import md5 from 'js-md5'


export default {
  name: 'login',

  data (){
    return {
        ruleForm: {
          userName: '',
          passWord: ''
        },
        rules: {
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 9, message: '长度在 3 到 9 个字符', trigger: 'blur' }
          ],
          passWord: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 9, message: '长度在 3 到 9 个字符', trigger: 'blur' }
          ]
  }
};
  },
   methods: {
      submitForm() {
        this.$refs.ruleForm.validate((valid) => {
          console.log(valid)
          if (valid) {
            this.$http({
              url:'/login',
              method:'POST',
              data:{
                userName:this.ruleForm.userName,
                passWord:md5(this.ruleForm.passWord),
                platform:'Web'
              }
            }).then(res => {
              if(!res.errorMsg){
                localStorage.setItem('token',res.token)
                localStorage.setItem('user',JSON.stringify(res))
                this.$router.push('/index')
              }
            })
          }
       });
      },
 
    }
  }

  
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
}
@media screen and ( max-width: 1440px){
}
</style>
